<template>
  <div class="page-401">
    <div class="lef-pannel">
      <img class="left-img" :src="gif" alt="">
      <img  class="right-img" :style="{'opacity': laugh?1:0}"  src="https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646" alt="">
    </div>
    <div class="right-pannel" style="padding: 1rem">
      <span style="font-size: 1.6rem;font-weight: bold">抱歉!</span>
      <br>
      <span style="font-weight: bold" >你没有权限去该页面</span>
      <br>
      <span style="font-size: 0.8rem;">如有不满请联系本网站管理员，或者你可以去:</span>
      <ul style="display: flex">
        <li class="link-type">
          <router-link to="/dashboard" style="color: #008489;">
            回首页
          </router-link>
        </li>
        <li style="margin-left: 1rem" class="link-type">
          <a href="https://www.baidu.com/" style="color: #008489;">随便看看</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import errGif from '@/assets/401_images/401.gif';

const gif = ref(`${errGif}?${+new Date()}`);

const laugh = ref(false);
onMounted(() => {
  setTimeout(() => {
    laugh.value = true;
  }, 2500);
});
</script>

<style lang="scss" scoped>
.page-401{
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  transform: translate(-50%,-60%);

  .lef-pannel{
    display: flex;
    align-items: end;
    width: 30rem;
    .left-img{
      width: 18rem;
      height:26rem;
    }
    .right-img{
      bottom: 0;
      width: 10rem;
      height: 10rem;
      opacity: 0;
      transition: opacity 0.3s;
    }

    @media screen and (width <= 920px) {
      .left-img{
        width: 16rem;
        height:22rem;
        transition: .8s ease-in-out;
      }
      .right-img{
        width: 5rem;
        height: 5rem;
        transition: opacity 0.3s;
      }
    }
  }
}

</style>
